<!-- home -->
<template>
  <div class="container">
    <van-nav-bar
      title="制定销售任务"
      class="navclass"
      left-arrow
      left-text="返回"
      @click-left="doback"
    />

    <van-cell title="填报人：" v-model="ywyname" />

    <van-cell title="选择月份" required v-model="date" @click="onDisplay" is-link />

    <van-popup v-model="dateshow" round position="bottom" :style="{ height: '50%' }" >
      <van-datetime-picker
        v-model="currentDate"
        type="year-month"
        title="选择年月"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @confirm="onConfirmNy"
        @cancel="oncancel"
      />
    </van-popup>

    <van-panel title="销售任务" desc="" :status="zje">
        <div v-for="item in provinceList " :key="item.deptId" style="padding-left: 20px;">
          <van-panel :title="item.deptName" desc="" :status="item.rwje">
            <div style="padding-left: 10px;">
              <van-cell-group>
                <van-field
                  v-model="item.firstTaskNum"
                  label="1-8号"
                  label-width="40%"
                  placeholder="任务额(元)"
                  type="digit"
                  @input="onChangeRwje(item)"
                />
                <van-field
                  v-model="item.secondTaskNum"
                  label="9-15号"
                  label-width="40%"
                  placeholder="任务额(元)"
                  type="digit"
                  @input="onChangeRwje(item)"
                />
                <van-field
                  v-model="item.thirdTaskNum"
                  label-width="40%"
                  label="16-23号"
                  placeholder="任务额(元)"
                  type="digit"
                  @input="onChangeRwje(item)"
                />
                <van-field
                  v-model="item.fourthTaskNum"
                  label-width="40%"
                  label="24号以后"
                  placeholder="任务额(元)"
                  type="digit"
                  @input="onChangeRwje(item)"
                />
              </van-cell-group>
            </div>

          </van-panel>
        </div>
      <van-field
        v-model="zje"
        label-width="40%"
        label="总任务额"
        placeholder="任务额(元)"
        type="digit"
        disabled="true"
      />
    </van-panel>

    <div  class="btn" >
      <van-button type="info" size="large" round @click="doSubmit" >提交</van-button>
    </div>

  </div>
</template>

<script>

import { Dialog, Toast, Grid, GridItem, Calendar, Cell, DatetimePicker, CellGroup, Collapse, CollapseItem } from 'vant'
import { floatAdd, floatSub, floatMul, floatDiv } from '../../utils/NumberUtil'
import { addBusitask, getProvinceList, addDeptTask, delBusitask, listDepttask } from '../../api/api'

export default {
  name: 'MakeTask',
  data() {
    return {
      companyListFront: [],
      companyList1: [],
      platformProductCategory: [],
      platformCategory: '',
      productList: [],
      pageNum: 1,
      pageSize: 10,
      date: '',
      currentDate: new Date(),
      show: false,
      kjflag: false,
      showfblx: false,
      showspdl: false,
      ywlxname: '',
      ywlx: '',
      dateshow: false,
      actions: [],
      dkactions: [],
      dklxname: '',
      dklx: '',
      dklxshow: false,
      minDate: new Date(2020, 1, 1),
      maxDate: new Date(2029, 12, 31),
      zje: 0,
      ywyname: '',
      provinceList: [],
      activeNames: ['1']

    }
  },

  created() {
    this.ywyname = this.$store.getters.userName
    this.getProvinceList()
  },
  mounted() {

  },

  methods: {

    formatter(type, val) {
      if (type === 'year') {
        return `${val}年`
      } else if (type === 'month') {
        return `${val}月`
      }
      return val
    },

    addyj() {
      this.$router.push({ path: '/addyj', query: {}})
    },

    onDisplay() {
      this.dateshow = true
    },
    onClose() {
      this.show = false
    },

    onConfirm(event) {
      this.dateshow = false
      this.date = this.formatDate(event)
      this.listDepttask()
    },

    formatDate(date) {
      const date1 = new Date(date)
      return `${date1.getFullYear()}/${date1.getMonth() + 1}/${date1.getDate()}`
    },

    doSubmit() {
      if (!this.date) {
        Toast.fail('请选择月份')
        return
      }

      const provinceList = this.provinceList
      const list = []
      for (var i = 0; i < provinceList.length; i++) {
        if (!provinceList[i].rwje) {
          Toast.fail(provinceList[i].deptName + '未分配销售任务')
          return
        }
        const temp = { depttaskid: provinceList[i].depttaskid, deptId: provinceList[i].deptId, deptName: provinceList[i].deptName, tasknum: provinceList[i].rwje, firstTaskNum: provinceList[i].firstTaskNum, secondTaskNum: provinceList[i].secondTaskNum, thirdTaskNum: provinceList[i].thirdTaskNum, fourthTaskNum: provinceList[i].fourthTaskNum }
        list.push(temp)
      }

      const param = {}
      param.ssyf = this.date
      param.list = list

      addDeptTask(param).then(response => {
        if (response.code === 200) {
          Dialog.alert({
            title: '',
            message: '提交成功'
          }).then(() => {
            // on close
            this.$router.go(-1) // 返回上一层
          })
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    doback() {
      this.$router.go(-1) // 返回上一层
    },

    onConfirmNy(event) {
      console.log(event)
      var year = event.getFullYear() + ''
      var month = (event.getMonth() + 1) + ''
      var date = year + (month < 10 ? '0' : '') + month
      this.date = date
      this.dateshow = false
      this.listDepttask()
    },

    oncancel() {
      this.dateshow = false
    },

    getProvinceList() {
      const param = {}
      getProvinceList(param).then(response => {
        if (response.code === 200) {
          console.log(response)

          this.provinceList = response.rows
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    listDepttask() {
      const param = {}
      param.ssyf = this.date
      listDepttask(param).then(response => {
        if (response.code === 200) {
          console.log(response)
          if (response.rows) {
            if (response.rows.length > 0) {
              this.provinceList = response.rows
            } else {
              this.getProvinceList()
              this.zje = ''
            }
          }
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    onChangeRwje(item) {
      let sum = 0
      item.rwje = floatAdd(floatAdd(floatAdd(item.firstTaskNum, item.secondTaskNum), item.thirdTaskNum), item.fourthTaskNum)

      const list = this.provinceList
      for (var i = 0; i < list.length; i++) {
        if (list[i].deptId != item.deptId) {
          if (list[i].rwje) {
            sum = floatAdd(sum, parseFloat(list[i].rwje))
          }
        }
      }
      let total = 0
      const fValue = parseFloat(item.rwje)
      total = floatAdd(sum, fValue)
      this.zje = total
    }
  }
}
</script>
<style lang="scss" scoped>

  .container{
    width: 100%;
    height: calc(100vh);
    background-color: white;
  }

  .navclass{
    background-color:#f8f8f8;
  }

  .btn{
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 30px;
    background-color: white;
    padding-bottom: 150px;
  }

</style>
